<template>
	<view>
		<nav-bar title="店铺印象"></nav-bar>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
		<view class="shop_info">
			<view class="shop_nameinfo">
				<image :src="shopInfo.logo" mode="aspectFill"></image>
				<view>
					<text>{{shopInfo.name}}</text>
					<view v-if="shopInfo.selfSupport">自营</view>
				</view>
			</view>
			<view class="shop_attentionstatus">
				<!-- <text>54.3万人收藏</text> -->
				<text></text>
				<view>
					<button v-if="shopInfo.collection" @click="onCollection" class="like active">已收藏</button>
					<button v-else @click="onCollection" class="like">收藏</button>
					<button class="customerservice" @click="onGoService">客服</button>
				</view>
			</view>
		</view>
		<view class="shop_intro" v-if="shopInfo.introduce">
			<text>店铺介绍</text>
			<view>
				{{shopInfo.introduce}}
			</view>
		</view>
		<view class="shop_basicinfo">
			<view class="cell_list">
				<view class="cell_left">联系电话</view>
				<view class="cell_right" @click="onCall(shopInfo.phone)">{{shopInfo.phone}}</view>
			</view>
			<view class="cell_list">
				<view class="cell_left">入驻时间</view>
				<view class="cell_right">{{ shopInfo.createTime }}</view>
			</view>
			<view class="cell_list">
				<view class="cell_left">店铺地址</view>
				<view class="cell_right">{{shopInfo.address}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { appShare, 
		publicShare
	} from '@/config/utils';
	export default {
		data() {
			return {
				// 当前商铺Id
				objId: '',
				shopInfo: {
                    "name": "",
                    "logo": "",
                    "bulletin": "",
                    "fullDiscountMoney": [],
                    "address": "",
                    "phone": "",
                    "introduce": "",
                    "qualification": [],
                    "collection": false,
                    "share": {
                        "shareUrl": "",
                        "shareTitle": "",
                        "shareContent": "",
                        "shareImg": "",
                        "shareRegisterUrl": null,
                        "pathMallShop": "",
                        "pathMallGoods": "",
                        "pathMallPtGoods": "",
                        "pathMallPackage": "",
                        "pathWmShop": "",
                        "pathTgShop": "",
                        "pathTgGoods": "",
                        "pathHotelShop": "",
                        "pathHotelHomestay": "",
                        "pathStall": "",
                        "pathEasy": "",
                        "pathMarket": "",
                        "pathArticle": ""
                    }
                },
			};
		},
		//第一次加载
		onLoad(e) {
			this.objId = e.objId;
			this.pageData();
		},
		//页面显示
		onShow() {},
		//方法
		methods: {
			onPageJump(url) {
				uni.navigateTo({
					url: url
				});
			},
			//拨打电话
			onCall(phone) {
				if (phone) {
					uni.makePhoneCall({
						phoneNumber: phone
					});
				}
			},
			// 进入客服
			onGoService() {
				this.judgeLogin(() => {
					uni.navigateTo({
						url: '/pages/message/serviceChat?shopType=1501&objId=' + this.shopInfo.objId + '&roomName=' + this.shopInfo.name
					});
				});
			},
			// 加载商家和套餐商品数据
			pageData() {
				this.$http
					.get('api/mall/shop/v1/info', {
						objId: this.objId
					})
					.then(res => {
						this.shopInfo = res;
						uni.setNavigationBarTitle({
							title: this.shopInfo.name
						});
						this.title = this.shopInfo.name;
						// #ifdef H5
						publicShare(res.share);
						// #endif
					});
			},
			// 收藏
			onCollection() {
				this.judgeLogin(() => {
					this.$http
						.post('api/collect/v1/operate_data', {
							type: 1401,
							objIds: [this.shopInfo.objId]
						})
						.then(res => {
							if (this.shopInfo.collection) {
								uni.showToast({
									title: '取消收藏成功'
								});
								this.shopInfo.collection = false;
							} else {
								uni.showToast({
									title: '收藏成功'
								});
								this.shopInfo.collection = true;
							}
						});
				});
			},
		},
		//页面隐藏
		onHide() {},
		//页面卸载
		onUnload() {},
		//页面下来刷新
		onPullDownRefresh() {},
		//页面上拉触底
		onReachBottom() {},
		//用户点击分享
		onShareAppMessage(e) {
			return this.wxShare();
		}
	};
</script>
<style lang="scss" scoped>
	@import '@/style/mixin.scss';

	.shop_info {
		display: flex;
		flex-direction: column;
		background: #ffffff;
		padding: 30rpx;

		.shop_nameinfo {
			display: flex;
			justify-content: flex-start;
			align-items: center;

			>image {
				width: 80rpx;
				height: 80rpx;
			}

			>view {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				padding-left: 30rpx;

				>text {
					color: #333333;
					font-size: 32rpx;
					padding-bottom: 19rpx;
				}

				>view {
					@include theme('gradient_bg') padding: 2rpx 15rpx;
					border-radius: 15rpx;
					color: #ffffff;
					font-size: 24rpx;
				}
			}
		}

		.shop_attentionstatus {
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			padding-left: 110rpx;

			>text {
				font-size: 24rpx;
				color: #999999;
			}

			>view {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.customerservice {
					margin-left: 20rpx;
					display: flex;
					justify-content: center;
					align-items: center;

					&:before {
						content: '';
						position: relative;
						background-image: url('../../../static/icon/shop/ic_shop_agent.png');
						background-position: center;
						background-size: 100% 100%;
						background-repeat: no-repeat;
						margin-right: 15rpx;
						width: 28rpx;
						height: 28rpx;
					}
				}

				.like {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;

					&:before {
						content: '';
						position: relative;
						background-image: url('../../../static/icon/ic_collection_white.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						background-position: center;
						width: 28rpx;
						height: 28rpx;
						margin-right: 12rpx;
					}

					&.active:before {
						content: initial;
					}
				}

				>button {
					width: 132rpx;
					height: 48rpx;
					border-radius: 24rpx;
					line-height: 48rpx;
					font-size: 28rpx;
					color: #ffffff;
					@include theme('gradient_bg');
				}
			}
		}
	}

	.shop_intro {
		display: flex;
		flex-direction: column;
		background: #ffffff;
		margin: 20rpx;
		border-radius: 8rpx;

		>text {
			padding: 30rpx;
			font-size: 32rpx;
			color: #cccccc;
		}

		>view {
			padding: 7rpx 30rpx 30rpx 30rpx;
			font-size: 28rpx;
			color: #333333;
			line-height: 46rpx;
		}
	}

	.shop_basicinfo {
		background: #ffffff;
		padding-top: 30rpx;
		padding-bottom: 10rpx;
		margin: 20rpx;
		border-radius: 8rpx;
		overflow: hidden;

		>text {
			padding-left: 30rpx;
			font-size: 32rpx;
			color: #333;
			margin-bottom: 10rpx;
		}
	}

	.cell_list {
		padding: 20rpx 30rpx;

		.cell_left {
			flex-shrink: 0;
			width: 150rpx;
		}
	}
</style>
